<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  layout: 'general',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '蓝莓记账',
  },
}
</route>
<template>
  <view class="homePage" :style="{ marginTop: safeAreaInsets?.top + 'px' }">
    <!-- <view class="mt-12">
      <image src="/static/logo.svg" alt="" class="w-28 h-28 block mx-auto" />
    </view> -->
    <!-- <cus-wd-navbar title="蓝莓记账"></cus-wd-navbar> -->
    <view class="controlBar">
      <view class="monthSelector barCell">
        <view class="topCell">2024</view>
        <view>12月</view>
      </view>
      <view class="sumMsg">
        <view class="sumCell barCell">
          <view>收入</view>
          <view>0.00</view>
        </view>
        <view class="sumCell barCell">
          <view>支出</view>
          <view>0.00</view>
        </view>
      </view>
    </view>
    <view class="accountListWrap">
      <view class="accountUl">
        <view class="accountLi" v-for="i in 30" :key="i">
          <view class="imgWrap">
            <wd-icon class-prefix="blueberry" name="canyin" />
          </view>
          <view class="accountMsg flex justify-between items-center px-.5em">
            <view>服饰</view>
            <view>-99</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import PLATFORM from '@/utils/platform'
import CusWdNavbar from '@/components/custom-wot-comp/CusWdNavbar.vue'
import SvgIcon from '@/components/SvgIcon.vue'
defineOptions({
  name: 'Home',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 测试 uni API 自动引入
onLoad(() => {})
</script>

<style lang="scss" scoped>
.homePage {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 50px);
  .controlBar {
    position: relative;
    display: flex;
    column-gap: 1em;
    padding: 0 1em 0.6em;
    color: #fff;
    .barCell {
      display: flex;
      flex-direction: column;
      row-gap: 0.5em;
      > view:first-child {
        font-size: 12px;
      }
      > view:last-child {
        font-size: 20px;
      }
    }
    .monthSelector {
      width: 20vw;
      > view:last-child {
        position: relative;
        &::after {
          position: absolute;
          top: 0;
          right: 0;
          display: block;
          width: 1px;
          height: 100%;
          content: '';
          background: #fff;
          transform: scaleX(0.5);
        }
      }
    }
    .sumMsg {
      display: flex;
      flex: 1;
      width: 100px;
      .sumCell {
        flex: 1;
      }
    }
    &::after {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      display: block;
      width: 100%;
      height: 7em;
      content: '';
      background-image: linear-gradient(
        to bottom,
        var(--welcome-bg-end) 0%,
        var(--welcome-bg-end) 50%,
        var(--welcome-bg-end2) 70%,
        #fff 100%
      );
    }
  }
  .accountListWrap {
    flex: 1;
    height: 100px;
    .accountUl {
      height: 100%;
      // margin: 0 0.5em;
      overflow: auto;
      background-color: #fff;
      // border-radius: 8px;

      .accountLi {
        display: flex;
        column-gap: 0.5em;
        height: 80px;
        .imgWrap {
          padding: 4px;
        }
        .accountMsg {
          flex: 1;
          width: 100px;
        }
        & + .accountLi {
          .accountMsg {
            position: relative;
            &::after {
              position: absolute;
              top: 0;
              left: 0;
              display: block;
              width: 100%;
              height: 1px;
              content: '';
              background-color: var(--list-border-color);
              transform: scaleY(0.5);
            }
          }
        }
      }
    }
  }
}
</style>
